<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" class="layui-input"
                        value="{$find.title}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">父级</label>
                <div class="layui-input-block">
                    <div name="pid" id="pid" value="0"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图标</label>
                <div class="layui-input-block">
                    <input name="icon" id="icon" lay-filter="icon" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-filter="type">
                        <option value="目录">目录</option>
                        <option value="菜单">菜单</option>
                        <option value="权限">权限</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">路由</label>
                <div class="layui-input-block">
                    <select name="route">
                        <option value="">无</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">打开类型</label>
                <div class="layui-input-block">
                    <select name="openType">
                        <option value="">无</option>
                        <option value="_component" {$find.openType=='_component' ? 'selected' : '' }>页内窗口</option>
                        <option value="_layer" {$find.openType=='_layer' ? 'selected' : '' }>弹出窗口</option>
                        <option value="_blank" {$find.openType=='_blank' ? 'selected' : '' }>新的窗口</option>
                        <option value="_iframe" {$find.openType=='_iframe' ? 'selected' : '' }>框架窗口</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="number" lay-affix="number" name="weight" value="{$find.weight}" class="layui-input">
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(["iconPicker", "jquery", "xmSelect", "form"], function () {
        // 图标
        layui.iconPicker.render({
            elem: "#icon",
            type: "fontClass",
            page: false
        });
        layui.iconPicker.checkIcon('icon', '{$find.icon}');

        // 父级
        layui.$.post("{:route('admin.menu.query')}", { limit: 1000 }, function (res) {
            layui.xmSelect.render({
                el: "#pid",
                name: "pid",
                initValue: ['{$find.pid}'],
                tips: "无",
                toolbar: { show: true, list: ["CLEAR"] },
                data: res.data,
                model: { "icon": "hidden", "label": { "type": "text" } },
                clickClose: true,
                radio: true,
                tree: { show: true, "strict": false, "clickCheck": true, "clickExpand": false, expandedKeys: ['{$find.pid}'] },
                prop: {
                    name: "title",
                    value: "id"
                }
            });
        })


        // 类型 改变 路由
        layui.form.on('select(type)', function (data) {
            let value = data.value;
            if (value == "目录") {
                layui.$("select[name='route']").html(`<option value="">无</option>`)
                layui.form.render("select")
                return;
            } else {
                layui.$.get(`{:route("admin.menu.route_name")}`,
                    { type: value },
                    function (res) {
                        let list = "";
                        Object.entries(res.data).forEach(([k, v]) => {
                            list += `<optgroup label="${v.title}">`
                            Object.entries(v.methods).forEach(([kk, vv]) => {
                                list += `<option value="${vv.name}">${v.title}---${vv.title}</option>`
                            })
                        });
                        layui.$("select[name='route']").html(list);
                        layui.form.render("select");
                    })
            }

        });
    })
</script>